<template>
  <n-space class="email" vertical>
    <n-space justify="space-between">
      <n-form
        ref="formRef"
        inline
        :label-width="80"
        :model="formValue"
        label-placement="left"
        :rules="rules"
      >
        <n-form-item label="发送邮箱" path="fromEmail">
          <n-input v-model:value="formValue.fromEmail" />
        </n-form-item>
        <n-form-item label="接收邮箱" path="toEmail">
          <n-input v-model:value="formValue.toEmail" />
        </n-form-item>
        <n-form-item label="状态" path="isSuccess">
          <n-select
            v-model:value="formValue.isSuccess"
            clearable
            :options="options"
          />
        </n-form-item>
        <n-form-item>
          <n-button @click="findClick"> 查询 </n-button>
        </n-form-item>
      </n-form>
    </n-space>
    <n-data-table
      :columns="columns"
      :data="data"
      :pagination="pagination"
      :bordered="false"
      remote
      :row-key="rowKey"
      @update:page-size="handlePageSizeChange"
      @update:page="handlePageChange"
    />
  </n-space>
</template>

<script setup lang="ts">
import {
  type FormInst,
  type FormItemRule,
  NForm,
  NFormItem,
  NInput,
  NButton,
  NSelect,
  NSpace,
  NDataTable,
  NTag,
  type SelectOption,
  type SelectGroupOption,
  type DataTableColumns,
} from "naive-ui";
import {
  type Smtp,
  findAll as apiSmtpFindALl,
  delSmtp as apiSmtpDel,
  type findSmtp,
} from "~/api/smtp";
useHead({
  title: "邮件管理", //网站标题
});
definePageMeta({
  title: "邮件管理",
});

const formRef = ref<FormInst | null>();
const formValue = ref({
  fromEmail: "",
  toEmail: "",
  isSuccess: null,
});
const rules = {
  fromEmail: {
    pattern: /^.{0,10}$/,
    message: "查询长度小于10",
    trigger: "input",
  },
  toEmail: {
    pattern: /^.{0,10}$/,
    message: "查询长度小于10",
    trigger: "input",
  },
};
const options: Array<SelectOption | SelectGroupOption> = [
  {
    label: "成功",
    value: 1,
  },
  {
    label: "失败",
    value: 0,
  },
];

const findClick = (e: MouseEvent) => {
  e.preventDefault();
  const messageReactive = naiveui.message.loading("Verifying", {
    duration: 0,
  });
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      naiveui.message.success("文章查询");
      findAll();
    } else {
      naiveui.message.error(errors[0][0].message ?? "表单验证错误");
    }
    messageReactive.destroy();
  });
};

const dayjs = useDayjs();
const createColumns = ({
  del,
}: {
  del: (row: Smtp) => void;
}): DataTableColumns<Smtp> => {
  return [
    {
      title: "发送邮件",
      key: "fromEmail",
    },
    {
      title: "接收邮件",
      key: "toEmail",
    },
    {
      title: "状态",
      key: "isSuccess",
      render(row: Smtp) {
        return h(
          NTag,
          {
            type: row.isSuccess ? "success" : "info",
            bordered: false,
          },
          {
            default: () => (row.isSuccess ? "成功" : "失败"),
          }
        );
      },
    },
    {
      title: "主题",
      key: "subject",
    },
    {
      title: "创建日期",
      key: "createTime",
      render(row: Smtp) {
        return dayjs(row.createTime).format("YYYY年MM月DD日");
      },
    },
    {
      title: "Action",
      key: "actions",
      render(row: Smtp) {
        return h(
          NButton,
          {
            strong: true,
            tertiary: true,
            size: "small",
            onClick: () => del(row),
          },
          { default: () => "删除" }
        );
      },
    },
  ];
};

const data = ref<Smtp[]>([]);

const columns = createColumns({
  async del(row: Smtp) {
    await apiSmtpDel(row.id);
    findAll();
  },
});
const rowKey = (rowData: { id: any }) => {
  return rowData.id;
};
const handlePageChange = (page: number) => {
  pagination.value.page = page;
  findAll();
};
const handlePageSizeChange = (pageSize: number) => {
  pagination.value.pageSize = pageSize;
  pagination.value.page = 1;
  findAll();
};
const pagination = ref({
  page: 1,
  pageSize: 10,
  itemCount: 0,
  pageSizes: [3, 5, 7],
});
const findAll = async () => {
  const query: findSmtp = {
    pageNum: pagination.value.page,
    pageSize: pagination.value.pageSize,
  };
  if (formValue.value.isSuccess !== null)
    query.isSuccess = formValue.value.isSuccess;
  if (formValue.value.fromEmail) query.fromEmail = formValue.value.fromEmail;
  if (formValue.value.toEmail) query.toEmail = formValue.value.toEmail;
  const res = await apiSmtpFindALl(query);
  if (res.data) {
    data.value = res.data.list;
    pagination.value.itemCount = res.data.count;
  }
};
onMounted(async () => {
  
  findAll();
});
</script>
<style lang="scss" scoped>
.email {
  
  padding: 20px 15px;
  .n-input,
  .n-select {
    width: 200px;
  }
  .n-pagination {
    justify-content: center;
  }
}
</style>
